<template>
	<view v-if="imgHost" :style="theme">
		<view class="contents" :style="{background: navBj}">
			<!-- #ifdef MP-WEIXIN -->
			<u-navbar :placeholder="true" :bgColor="bgColor">
				<view slot="left" class="flex location" @click="jump2('/pages/venue/index')">
					<image :src="imgHost+'/home_ic_location.png'" mode="widthFix" class="locationImg"></image>
					<text class="locationName">{{venueName?venueName:'请选择场馆'}}</text>
					<image :src="imgHost+'/home_ar_next.png'" mode="widthFix" class="locationIcon"></image>
				</view>
			</u-navbar>
			<!-- #endif -->
			<!-- #ifdef MP-TOUTIAO -->
			<view class="flex location zjtd" :class="lbList && lbList.length > 0?'':'wu'" :style="{background: navBj}">
				@click="jump2('/pages/venue/index')">
				<view class="flex">
					<image :src="imgHost+'/home_ic_location.png'" mode="widthFix" class="locationImg"></image>
					<text class="locationName">{{venueName?venueName:'请选择场馆'}}</text>
					<image :src="imgHost+'/home_ar_next.png'" mode="widthFix" class="locationIcon"></image>
				</view>
			</view>
			<!-- #endif -->
			<view class="content">
				<block v-for="(em, i) in homeList" :key="i">
					<div v-if="em.code == 'M_BANNER'" class="cardCont mb3">
						<u-swiper v-if="lbList && lbList.length > 0" :list="lbList" indicator indicatorMode="dot"
							height="300rpx" circular @click="swiperClick" keyName="imageFullPath"
							:autoplay="lbList.length > 1"></u-swiper>
					</div>
					<div v-if="em.code == 'M_NOTICE'" class="cardCont mb3">
						<u-notice-bar v-if="textList && textList.length > 0 "
							customStyle="box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(0,0,0,0.08);border-radius: 8rpx;padding: 30rpx 20rpx;"
							:text="textList" direction="column" url="/subPackages/notice/index" color="#333333"
							:icon="imgHost+'/home_ic_notice.png'" bgColor="rgba(255,255,255,0.08)"></u-notice-bar>
					</div>
					<view v-if="em.code == 'M_FUNCTION' && em.venueContents && em.venueContents.length > 0"
						class="dbt flex flex_between">
						<view class="left">
							{{em.name}}
						</view>
					</view>
					<view v-if="em.code == 'M_FUNCTION' && em.venueContents && em.venueContents.length > 0"
						class="service_box mb2">
						<view v-for="(s, m) in em.venueContents" :key="m" class="service_box_item"
							:class="'w' + em.rowNum" @click="jumps(s.url)">
							<view class="service_box_item_icon">
								<image :src="s.icon"></image>
							</view>
							<text class="service_box_item_text">{{s.title}}</text>
						</view>
					</view>
					<!-- 	<view v-if="em.code == 'M_PROJECT'&& list&&list.length>0" class="dbt flex flex_between">
						<view class="left">
							{{em.name}}
						</view>
					</view> -->
					<view v-if="em.code == 'M_PROJECT'" class="hdList cardCont mb2">
						<view v-for="(item, index) in list" :key="index" class="hdli"
							:class="em.paramShow.indexOf('3') > -1?'w' + em.rowNum:'wu w' + em.rowNum"
							:style="{backgroundImage: 'url(' + item.showBgPic + ')'}"
							@click="jump2('/pages/venue/fieldArea?id=',item.id+'&name='+item.projectName)">
							<view v-if="em.paramShow.indexOf('2') > -1" class="kuan">
								<image :src="item.showProjectPictures"></image>
							</view>
							<view v-if="em.paramShow.indexOf('1') > -1" class="hdWz limit-1-line">
								{{item.projectName}}
							</view>
						</view>
					</view>
					<ShortcutTab v-if="em.code == 'M_SITE'" :showList="em.paramShow" :contentType="em.style" />
					<view v-if="em.code == 'M_COURSE'&&kcList&&kcList.length>0" class="dbt flex flex_between">
						<view class="left">
							{{em.name}}
						</view>
						<view class="right flex" @click="jump2('/pages/curriculum/index','', 1)">
							<text style="margin-right: 5rpx;">查看更多</text>
							<u-icon name="arrow-right" color="#999999" size="20rpx"></u-icon>
						</view>
					</view>
					<KcList v-if="em.code == 'M_COURSE'" :showList="em.paramShow" :list="kcList"
						:lxName="em.style==1?'hd':em.style==2?'dt':em.style==3?'zt':'sx'" />
					<view v-if="em.code == 'M_MEALS'&&setmealList&&setmealList.length>0" class="dbt flex flex_between">
						<view class="left">
							{{em.name}}
						</view>
						<view class="right flex" @click="jump2('/pages/setmeal/index','', 1)">
							<text style="margin-right: 5rpx;">查看更多</text>
							<u-icon name="arrow-right" color="#999999" size="20rpx"></u-icon>
						</view>
					</view>
					<TcList v-if="em.code == 'M_MEALS'" :showList="em.paramShow" :list="setmealList"
						:lxName="em.style==1?'hd':em.style==2?'dt':em.style==3?'zt':'sx'" />
					<view v-if="em.code == 'M_ACTIVITY'&&hdList&&hdList.length>0" class="dbt flex flex_between">
						<view class="left">
							{{em.name}}
						</view>
						<view class="right flex" @click="jump2('/pages/activity/index','', 1)">
							<text style="margin-right: 5rpx;">查看更多</text>
							<u-icon name="arrow-right" color="#999999" size="20rpx"></u-icon>
						</view>
					</view>
					<HdList v-if="em.code == 'M_ACTIVITY'" :showList="em.paramShow" :list="hdList"
						:lxName="em.style==1?'hd':em.style==2?'dt':'zt'" />
					<view v-if="em.code == 'M_KNOWLEDGE'&&zsList&&zsList.length>0" class="dbt flex flex_between">
						<view class="left">
							{{em.name}}
						</view>
						<view class="right flex" @click="jump2('/pages/sport/index')">
							<text style="margin-right: 5rpx;">查看更多</text>
							<u-icon name="arrow-right" color="#999999" size="20rpx"></u-icon>
						</view>
					</view>
					<YdList v-if="em.code == 'M_KNOWLEDGE'" :showList="em.paramShow" :list="zsList"
						:lxName="em.style==1?'hd':em.style==2?'dt':em.style==3?'zt':'sx'" />
				</block>
			</view>
			<tabber v-if="tabUrl.includes(tabIndex)" :value="tabIndex" />
		</view>
		<u-popup :show="showKp" mode="center" round="20rpx" custom-style="background: none">
			<view class="kpgg">
				<image :src="sygg.imageFullPath" mode="widthFix" @click="ggBtn"></image>
				<u-icon name="close" size="64rpx" color="white" @click="gbShowKp" />
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import tabber from "@/components/tabber.vue";
	import KcList from "@/components/kcList.vue";
	import YdList from "@/components/ydList.vue";
	import TcList from "@/components/tcList.vue";
	import HdList from "@/components/hdList.vue";
	import ShortcutTab from "@/components/shortcutTab.vue";
	export default {
		components: {
			tabber,
			KcList,
			YdList,
			HdList,
			TcList,
			ShortcutTab
		},
		computed: mapState(["tabUrl"]),
		data() {
			return {
				bgColor: 'rgba(255,255,255,0)',
				tabIndex: '/pages/index/index',
				name: '',
				venueList: [],
				lbList: [],
				showKp: false,
				sygg: {},
				textList: [],
				indicator: false,
				list: [],
				kcList: [],
				hdList: [],
				zsList: [],
				setmealList: [],
				homeList: [],
				navBj: ''
			}
		},
		onShow() {
			//  更换场馆
			if (this.venue) {
				this.$store.commit('setVenue', false);
				this.getAppHomeRenovationInfo()
			}
			if (this.userInfo && uni.getStorageSync('shareMemberId') && uni.getStorageSync('shareMemberId') !=
				'undefined') {
				this.addShareMemberRelevance(uni.getStorageSync('shareMemberId'))
			}
		},
		async onLoad(ops) {
			await this.$onLaunched;
			// this.getMemberInformation()
			this.getCG()
			const scene = decodeURIComponent(ops.scene)
			if (scene && scene != 'undefined') {
				uni.setStorage({
					key: 'shareMemberId',
					data: scene
				});
				if (this.userInfo) {
					this.addShareMemberRelevance(scene)
				}
			}
		},
		methods: {
			jump(url, params, a) {
				this.$app.jump(url, params, a);
			},
			jump2(url, params, a) {
				this.$app.jump4(url, params, a);
			},
			addShareMemberRelevance(shareMemberId) {
				this.$app.ajax({
					data: {
						param: {
							shareMemberId
						}
					},
					api: this.$api.addShareMemberRelevance()
				}).then((res) => {
					if (res.errorCode === '000000') {
						uni.removeStorageSync('shareMemberId');
					}
				})
			},
			getAppHomeRenovationInfo() {
				this.homeList = []
				this.$app.ajax({
					data: {
						param: {
							code: 'T_HOME'
						}
					},
					api: this.$api.getAppHomeRenovationInfo()
				}).then((res) => {
					if (res.errorCode === '000000') {
						let arr = res.recordList
						let obj = {}
						arr.forEach(s => {
							if (s.paramList && s.paramList.length > 0) {
								s.paramShow = s.paramList.map(s => s.key)
							} else {
								s.paramShow = []
							}
							obj[s.code] = s
						})
						this.homeList = arr
						if (obj['M_BANNER'] && obj['M_BANNER'].paramList && obj['M_BANNER'].paramShow.indexOf(
								'1') > -1) {
							this.navBj = 'linear-gradient(180deg,' + 'var(--color2)' + ' 0%, #F7F7F7 100%)'
						} else {
							this.navBj = ''
						}
						this.getInfo()
						this.getBanner()
						this.getZsList()
						this.getProject()
						this.hotCourseList()
						this.getActivityListMini()
						this.getMealsOnlineList()
					}
				})
			},
			// 判断跳转
			jumps(url) {
				if (url === 'member') {
					if (this.userInfo.isNormal == '1') {
						this.jump2('/pages/member/recharge')
					} else {
						this.jump2('/pages/member/handle')
					}
				} else {
					this.jump2(url)
				}
			},
			getActivityListMini() {
				this.$app.ajax({
					data: {
						pagination: {
							firstQueryTime: this.$app.firstQueryTime(),
							page: 1,
							rows: 6
						},
						param: {
							venueId: this.venueId,
							isRec: '1'
						}
					},
					api: this.$api.activityListMini()
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.hdList = res.recordList || []
					}
				}).catch(() => {})
			},
			getMealsOnlineList() {
				this.$app.ajax({
					api: this.$api.mealsOnlineList(),
					data: {
						pagination: {
							page: 1,
							rows: 9
						},
						param: {
							venueId: this.venueId,
							isRec: '1'
						}
					}
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.setmealList = res.recordList || []
					}
				}).catch(() => {})
			},
			getZsList() {
				this.$app.ajax({
					data: {
						pagination: {
							firstQueryTime: this.$app.firstQueryTime(),
							page: 1,
							rows: 6
						},
						param: {
							venueId: this.venueId,
							isRec: '1',
							type: '1'
						}
					},
					api: this.$api.listWXKnowledge()
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.zsList = res.recordList || []
					}
				}).catch(() => {})
			},
			hotCourseList() {
				this.$app.ajax({
					data: {
						pagination: {
							firstQueryTime: this.$app.firstQueryTime(),
							page: 1,
							rows: 6
						},
						param: {
							venueId: this.venueId,
							isRec: '1'
						}
					},
					api: this.$api.hotCourseList()
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.kcList = res.recordList || []
					}
				}).catch(() => {})
			},
			getProject() {
				this.$app.ajax({
					data: {
						param: {
							venueId: this.venueId,
							type: "0",
							isRec: '1',
							status: '1'
						},
						pagination: {
							firstQueryTime: this.$app.firstQueryTime(),
							page: 1,
							rows: 9
						},
					},
					api: this.$api.getProject()
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.list = res.recordList || []
					}
				}).catch(() => {})

			},
			getMemberInformation() {
				// this.$app.ajax({
				// 	data: {
				// 		param: {}
				// 	},
				// 	api: this.$api.memberInformation()
				// }).then((res) => {
				// 	if (res.errorCode === '000000') {
				// 		this.$store.commit('saveUserInfo', res.record);
				// 		if (uni.getStorageSync('shareMemberId')) {
				// 			this.addShareMemberRelevance(uni.getStorageSync('shareMemberId'))
				// 		}
				// 	}
				// }).catch(() => {})
				if (this.userInfo) {
					this.addShareMemberRelevance(scene)
				}
			},
			// 获取轮播图
			getBanner() {
				this.$app.ajax({
					data: {
						param: {
							venueId: this.venueId,
							isRec: '1'
						},
						pagination: {
							page: 1,
							rows: 6
						},
					},
					api: this.$api.queryApplets()
				}).then((res) => {
					if (res.errorCode === '000000') {
						let arr = res.record || []
						let sygg = {}
						let lbList = []
						let showKp = false
						arr.forEach(e => {
							if (e.type == 1) {
								sygg = e
								showKp = true
							} else {
								lbList.push(e)
							}
						})
						this.sygg = sygg
						this.showKp = showKp
						this.lbList = lbList.slice(0, 5)
					} else {
						this.lbList = []
					}
				}).catch(() => {
					this.lbList = []
				})
			},
			getInfo() {
				this.$app.ajax({
					data: {
						pagination: {
							firstQueryTime: this.$app.firstQueryTime(),
							page: 1,
							rows: 10
						},
						param: {
							memberId: this.userInfo.id,
							venueId: this.venueId,
							isRec: '1',
							type: this.userInfo && this.userInfo.id ? '4' : '2'
						}
					},
					api: this.$api.getInfo()
				}).then((res) => {
					if (res.errorCode === '000000') {
						let arr = res.recordList || []
						this.textList = arr.map((e) => e.content)
					}
				}).catch(() => {})
			},
			// 获取场馆 更新场馆id以及场馆名称
			getCG() {
				this.$app.ajax({
					data: {
						param: {
							lat: '',
							lng: '',
							openStatus: '1'
						}
					},
					api: this.$api.getVenue()
				}).then((res) => {
					if (res.errorCode === '000000') {
						let arr = res.recordList
						let index = 0
						if (this.venueId) {
							arr.forEach((e, dex) => {
								if (e.id === this.venueId) {
									index = dex
								}
							})
						}
						this.venueList = res.recordList || []
						this.$store.commit('setVenueName', res.recordList[index].name);
						this.$store.commit('setVenueId', res.recordList[index].id);
						this.$store.commit('setVenuephone', res.recordList[index].telephone);
						this.$store.commit('setAlbumStatus', res.recordList[index].albumStatus);
						setTimeout(() => {
							this.getAppHomeRenovationInfo()
						}, 200)
					}
				}).catch(() => {})

			},
			swiperClick(e) {
				let obj = this.lbList[e]
				if (obj.jumpPath && obj.idKey && obj.paramValue) {
					this.jump(obj.jumpPath + "?" + obj.idKey + '=' + obj.paramValue)
				}
			},
			gbShowKp() {
				this.showKp = false
			},
			ggBtn() {
				let obj = this.sygg
				if (obj.jumpPath && obj.idKey && obj.paramValue) {
					this.showKp = false
					this.jump(obj.jumpPath + "?" + obj.idKey + '=' + obj.paramValue)
				}
			},
			onPageScroll(res) {
				let topOpacity = res.scrollTop / 100 - .4
				if (res.scrollTop < 40) {
					topOpacity = 0
				} else if (topOpacity >= 1) {
					topOpacity = 1
				}
				this.bgColor = `rgba(255,255,255,${topOpacity})`
			}
		}
	}
</script>
<style lang="scss" scoped>
	.contents {
		height: 500rpx;
	}

	.location {
		&.zjtd {
			height: 100rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			position: sticky;
			top: 0;
			left: 0;
			width: 100%;
		}

		.locationImg {
			width: 36rpx;
			height: 36rpx;
		}

		.locationName {
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: Medium;
			margin: 0 20rpx;
			color: #111111;
		}

		.locationIcon {
			width: 22rpx;
			height: 22rpx;
		}

		&.zts {
			.locationName {
				color: #333;
			}
		}
	}

	.content {
		// width: 690rpx;
		margin: 30rpx auto 0;

	}

	.dbt {
		font-size: 26rpx;
		margin: auto auto 40rpx;
		color: #666666;
		width: 690rpx;

		.left {
			font-size: 34rpx;
			font-weight: 600;
			color: #222222;
		}

		.right {
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
		}
	}

	.hdList {
		display: flex;
		flex-wrap: wrap;

		.hdli {
			border-radius: 8rpx;
			margin-right: 15rpx;
			background-color: #fff;
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;
			text-align: center;
			background-position: center center;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			box-sizing: border-box;
			margin-right: 20rpx;

			.hdWz {
				font-size: 30rpx;
				color: #222222;
				line-height: 1;
				margin-top: 46rpx;
			}

			&.w2 {
				width: 335rpx;
				height: 384rpx;

				&:nth-child(2n) {
					margin-right: 0;
				}

				.kuan {
					width: 146rpx;
					height: 146rpx;
				}
			}

			&.w3 {
				width: 220rpx;
				height: 252rpx;
				margin-right: 15rpx;

				&:nth-child(3n) {
					margin-right: 0;
				}

				.kuan {
					width: 96rpx;
					height: 96rpx;
				}
			}

			&.w4 {
				width: 157.5rpx;
				height: 180rpx;

				&:nth-child(4n) {
					margin-right: 0;
				}

				.kuan {
					width: 68rpx;
					height: 68rpx;
				}

				.hdWz {
					margin-top: 35rpx;
				}
			}

			&.wu {
				background: #fff !important;
			}

			.kuan {
				display: block;
				background-color: #fff;
				box-sizing: border-box;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 100%;
					height: 100%;
				}
			}

			&.on {
				.kuan {
					border: none;
					background-color: $color;
				}

				.hdWz {
					color: $color;
				}
			}
		}

	}

	.kpgg {
		width: 600rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		z-index: 9999;

		image {
			width: 100%;
			border-radius: 10rpx;
			vertical-align: top;
			margin-bottom: 30rpx;
		}
	}

	.service_box {
		display: flex;
		flex-wrap: wrap;
		padding: 0 10rpx;
		box-sizing: border-box;

		.service_box_item {
			width: 25%;
			display: flex;
			align-items: center;
			flex-direction: column;
			margin-bottom: 20rpx;

			&.w2 {
				width: 50%;
			}

			&.w3 {
				width: 33.33%;
			}

			&.w4 {
				width: 25%;
			}

			&.w5 {
				width: 20%;
			}

			.service_box_item_icon {
				width: 88rpx;
				height: 88rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.service_box_item_text {
				color: #7F7F7F;
				font-size: 25rpx;
				margin-top: 10rpx;
			}
		}
	}


	.InAndOut {
		width: 100%;
		height: 160rpx;
		margin-top: 40rpx;
		display: flex;
		justify-content: space-between;

		.InAndOut_yq {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: calc(100% - 50% - 10rpx);
			height: 100%;
			box-sizing: border-box;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.kjrk {
		flex-wrap: wrap;
		width: 690rpx;
		display: flex;
		margin: 30rpx auto 0;

		image {
			width: 222rpx;
			margin-right: 12rpx;
			height: 260rpx;
			margin-bottom: 10rpx;

			&:nth-of-type(3n) {
				margin-right: 0;
			}
		}
	}

	.kjrks {
		flex-wrap: wrap;
		width: 690rpx;
		margin: 0 auto 30rpx;

		image {
			width: 340rpx;
			height: 282rpx;
		}
	}
</style>